<template>
    <a-skeleton active :loading="loading" :paragraph="{rows: 17}">
        <a-card :bordered="false" class="card-area">

            <a-alert type="info" :showIcon="true">
                <div slot="message">
                    共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
                    <a-divider type="vertical"/>
                    <a @click="handleClickUpdate">立即刷新</a>
                </div>
            </a-alert>

            <!-- 表格区域 -->
            <a-table
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="pagination"
                    :loading="tableLoading"
                    :scroll="{ x: 900 }"
                    style="margin-top: 20px;"
                    @change="handleTableChange">

                <template slot="timeTaken" slot-scope="text">
                    <a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
                    <a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
                    <a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
                    <a-tag v-else color="red">{{ text }} ms</a-tag>
                </template>

                <template slot="responseStatus" slot-scope="text">
                    <a-tag v-if="text < 200" color="pink">{{ text }} </a-tag>
                    <a-tag v-else-if="text < 201" color="green">{{ text }} </a-tag>
                    <a-tag v-else-if="text < 399" color="cyan">{{ text }} </a-tag>
                    <a-tag v-else-if="text < 403" color="orange">{{ text }} </a-tag>
                    <a-tag v-else-if="text < 501" color="red">{{ text }} </a-tag>
                    <span v-else>{{ text }}</span>
                </template>

                <template slot="requestMethod" slot-scope="text">
                    <a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
                    <a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
                    <a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
                    <a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
                    <span v-else>{{ text }} ms</span>
                </template>

            </a-table>

        </a-card>
    </a-skeleton>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'

moment.locale('zh-cn')

export default {
  data() {
    return {
      advanced: false,
      dataSource: [],
      pagination: {
        defaultPageSize: 10,
        defaultCurrent: 1,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: true,
      tableLoading: true
    }
  },
  computed: {
    columns() {
      return [{
        title: '请求时间',
        dataIndex: 'timestamp',
        customRender(text) {
          return moment(text).format('YYYY-MM-DD HH:mm:ss')
        }
      }, {
        title: '请求方法',
        dataIndex: 'request.method',
        scopedSlots: { customRender: 'requestMethod' },
        filters: [
          { text: 'GET', value: 'GET' },
          { text: 'POST', value: 'POST' },
          { text: 'PUT', value: 'PUT' },
          { text: 'DELETE', value: 'DELETE' }
        ],
        filterMultiple: true,
        onFilter: (value, record) => record.request.method.includes(value)
      }, {
        title: '请求URL',
        dataIndex: 'request.uri',
        customRender(text) {
          return text.split('?')[0]
        }
      }, {
        title: '响应状态',
        dataIndex: 'response.status',
        scopedSlots: { customRender: 'responseStatus' }
      }, {
        title: '请求耗时',
        dataIndex: 'timeTaken',
        scopedSlots: { customRender: 'timeTaken' }
      }]
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {

    handleClickUpdate() {
      this.fetch()
    },

    handleTableChange() {
      this.fetch()
    },

    fetch() {
      this.tableLoading = true
      getAction('actuator/httptrace').then((data) => {
        let filterData = []
        for (let d of data.traces) {
          if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
            filterData.push(d)
          }
        }
        this.dataSource = filterData
      }).catch((e) => {
        console.error(e)
        this.$message.error('获取HTTP信息失败')
      }).finally(() => {
        this.loading = false
        this.tableLoading = false
      })
    }

  }
}
</script>
<style></style>
